<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>防抖和节流</title>
</head>
<body>
<input type="text" id="input">

<h3>抢购次数：<span id="count">0</span></h3>
<button id="btn">click me,抢购</button>
<script>
/**
 * 防抖
 * @param  {Function} fn      [要执行的函数]
 * @param  {[number]}   delay   [延迟时间]
 * @param  {[object]}   context [this上下文]
 * @return {[Function]}           []
 */
// 如果在规定的时间内重复同样的操作，上一次操作会被取消
// 比如百度输入框输入关键词自动搜索
function _debounce(fn, delay = 1000) {
	let timer = null;
	return function() {
		if (timer) {
			clearTimeout(timer)
			timer = null;
		}
		
		timer = setTimeout(() => {
			fn.apply(this, arguments)
			// 但函数执行之后，清除timer
			timer = null;
			
		}, delay)
	}
}
// 例子
const input = document.querySelector('#input')
function handlerInput(e) {
	console.log(e.target.value)
}
input.addEventListener('keyup', _debounce(handlerInput))

// ----------------------------------------------------


/**
 * 节流
 * @param  {Function} fn      [要执行的函数]
 * @param  {[number]}   delay   [延迟时间]
 * @param  {[object]}   context [this上下文]
 * @return {[Function]}           []
 */
// 规定在某个时间内，只能操作一次，避免过多操作，浪费性能
// 比如抢购的时间，规定用户在间隔时间只能点击一次，避免狂点，请求过大
// 比如滚动事件，滚顶轮一直滚顶，但是我们可以规定他在某个时间间隔出发一次滚动函数
function _throttle(fn, delay = 30) {
	let timer = null;
	let inFirst = false; //首次触发
	return function() {
		if(!inFirst) {
			fn.apply(this, arguments)
			inFirst = true;
			return;
		}

		if (timer) {
			return;
		}
		timer = setTimeout(() => {
			fn.apply(this, arguments)
			timer = null
		}, delay)
	}
}



 function _throttle2(fn, delay = 30) {
	let lastTime = 0;
	return function() {
		// var currentTime = Date.parse(new Date());
		var currentTime = Date.now()
		if (currentTime - lastTime > delay) {
          fn.apply(this, arguments);
          lastTime = currentTime;
        }
	}
}

const count = document.querySelector('#count')
const btn = document.querySelector('#btn')



function handlerBtn(a,b,c) {
	console.log(arguments)
	let num = parseInt(count.innerText);
	num++;
	count.innerText = num;
}

// btn.addEventListener('click', _throttle(handlerBtn, 5000))
btn.addEventListener('click', _throttle2(() => handlerBtn(1,2,3), 2000))
</script>
</body>
</html>